<template>
  <a-modal
    :visible="show"
    width="80vw"
    min-height="60vh"
    title="报工合同选择器"
    @ok="handleOk"
    @cancel="handleCancle"
    :maskClosable="false"
    :key="show"
  >
    <a-row type="flex" justify="space-between" align="middle">
      <a-col :xl="{ span: 14 }" :lg="{ span: 11 }">
        <a-button @click="fetchList">刷新</a-button>
      </a-col>
      <a-col :xl="{ span: 9 }" :lg="{ span: 13 }" class="input-ground" style="display: flex; justify-content: flex-end">
        <div style="display: flex">
          <a-input-group compact style="display: flex">
            <a-select v-model="keywordType" @change="changeKeyorkType">
              <a-select-option value="1"> 合同编号 </a-select-option>
              <a-select-option value="2"> 合同名称 </a-select-option>
              <a-select-option value="3"> 采购订单号 </a-select-option>
            </a-select>
            <a-input-search
              v-if="keywordType == '1'"
              v-model="searchForm.contractNumber"
              @search="handleToSearch"
              placeholder="请按照关键字进行搜索"
            />
            <a-input-search
              v-else-if="keywordType == '2'"
              v-model="searchForm.contractName"
              @search="handleToSearch"
              placeholder="请按照关键字进行搜索"
            />
            <a-input-search
              v-else
              v-model="searchForm.busKey"
              @search="handleToSearch"
              placeholder="请按照关键字进行搜索"
            />
          </a-input-group>
          <a-button class="hte-btn del-btn" @click="openSearchForm">高级搜索</a-button>
        </div>
      </a-col>
      <a-modal
        :visible="showSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleToSearch"
        @cancel="hideSearchForm"
      >
        <a-form-model
          ref="ruleForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          @keyup.enter.native="handleToSearch"
        >
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="合同编号">
                <a-input allow-clear v-model="searchForm.contractNumber" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="合同名称">
                <a-input allow-clear v-model="searchForm.contractName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目经理">
                <a-input allow-clear v-model="searchForm.proManager" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="合同跟进专员">
                <a-input allow-clear v-model="searchForm.createOrderUser" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目负责人">
                <a-input allow-clear v-model="searchForm.followPerson" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="合同签订人">
                <a-input allow-clear v-model="searchForm.createUser" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="签订公司">
                <a-input allow-clear v-model="searchForm.signCompany" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="供应商名称">
                <a-input allow-clear v-model="searchForm.supplierName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="采购订单号">
                <a-input allow-clear v-model="searchForm.purchaseOrderNumber" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="费用支出号">
                <a-input allow-clear v-model="searchForm.costNumber" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8"> </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
    </a-row>
    <a-table
      :scroll="{ x: 1200 }"
      :columns="columns"
      :data-source="records"
      rowKey="id"
      bordered
      :pagination="false"
      :rowClassName="rowClassName"
      :customRow="customRow"
    >
    </a-table>
    <a-pagination
      show-size-changer
      :default-current="1"
      :total="searchForm.total"
      @change="pageChange"
      @showSizeChange="onShowSizeChange"
      :show-total="(total) => `共 ${total} 条记录`"
    />
  </a-modal>
</template>
<script>
import { postAction } from '@/api/manage'
import { TableMixin } from '@/mixins/TableMixin'
import { CodesMixin } from '@/mixins/CodesMixin'
export default {
  mixins: [TableMixin, CodesMixin],
  data() {
    return {
      show: false,
      urls: {
        list: '/workReport/project/projectSelector',
      },
      keywordType: '1',
      columns: [
        {
          title: '序号',
          dataIndex: 'sortIndex',
          width: '60px',
          align: 'center',
          customRender: (text, record, index) => {
            return index + 1
          },
        },
        {
          title: '合同编号',
          dataIndex: 'contractNumber',
          align: 'left',
          width: '120px',
          // customCell: () => {
          //   return this.customCellRender(100)
          // },
          // customRender: (text, record) => {
          //   return this.tooltipRender(text, record)
          // },
        },
        {
          title: '合同名称',
          dataIndex: 'contractName',
          align: 'left',
          width: '280px',
          // customCell: () => {
          //   return this.customCellRender(160)
          // },
          // customRender: (text, record) => {
          //   return this.tooltipRender(text, record)
          // },
        },
        {
          title: '项目经理',
          dataIndex: 'proManager',
          align: 'center',
          width: '80px',
          customCell: () => {
            return this.customCellRender(80)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '项目负责人',
          dataIndex: 'followPerson',
          align: 'center',
          width: '90px',
          customCell: () => {
            return this.customCellRender(80)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '签订公司',
          dataIndex: 'signCompany',
          align: 'left',
          width: '200px',
          customCell: () => {
            return this.customCellRender(200)
          },
          customRender: (text, record) => {
            return this.tooltipRender(record.signCompany+'/'+record.signCompanyCode, record)
          },
        },
        {
          title: '供应商',
          dataIndex: 'supplierName',
          align: 'left',
          width: '200px',
          customCell: () => {
            return this.customCellRender(200)
          },
          customRender: (text, record) => {
            return this.tooltipRender(record.supplierName+'/'+record.supplierCode, record)
          },
        },
        {
          title: '费用支出号',
          dataIndex: 'costNumber',
          align: 'left',
          width: '100px',
          customCell: () => {
            return this.customCellRender(200)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
      ],
    }
  },
  async mounted() {},
  methods: {
    init(projectNo) {
      this.records = []
      this.$set(this.searchForm, 'pageNo', 1)
      this.$set(this.searchForm, 'pageSize', 10)
      this.$set(this.searchForm, 'projectNo', projectNo)
      this.records = []
      this.show = true
      this.fetchList()
    },
    changeKeyorkType() {
      if (this.keywordType == '1') {
        this.$set(this.searchForm, 'contractName', null)
        this.$set(this.searchForm, 'busKey', null)
      } else if (this.keywordType == '1') {
        this.$set(this.searchForm, 'contractNumber', null)
        this.$set(this.searchForm, 'busKey', null)
      } else if (this.keywordType == '1') {
        this.$set(this.searchForm, 'contractNumber', null)
        this.$set(this.searchForm, 'contractName', null)
      }
    },
    handleToSearch() {
      this.pageNo = 1
      this.fetchList()
    },
    fetchList() {
      let that = this
      this.$set(this.searchForm, 'allSee', true)
      postAction(this.urls.list, this.searchForm).then((res) => {
        if (res.code == 200) {
          this.records = res.result.records
          this.searchForm.total = res.result.total
        } else {
          this.$messageWorkReport.warning('数据加载失败:' + res.message)
        }
        this.hideSearchForm()
      })
    },
    handleOk() {
      if (this.selectedRows.length != 1) {
        return this.$messageWorkReport.warning('请选择一条数据操作')
      }
      this.$emit('close', this.selectedRows[0])
      this.handleCancle()
    },
    handleCancle() {
      this.show = false
    },
    customRow(record) {
      return {
        on: {
          dblclick: (event) => {
            this.$emit('close', record)
            this.handleCancle()
          },
          click: (event) => {
            if (!this.selectedRowKeys) {
              this.selectedRowKeys = []
              this.selectedRows = []
            }
            if (this.selectedRowKeys.indexOf(record.id) <= -1) {
              this.selectedRows = [record]
              this.selectedRowKeys = [record.id]
            } else {
              this.selectedRowKeys = []
              this.selectedRows = []
            }
            return {
              style: {
                'font-weight': 'bold',
              },
            }
          },
        },
      }
    },
    rowClassName(record) {
      return this.selectedRowKeys.indexOf(record.id) > -1 ? 'blue' : 'white'
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-table-tbody .white {
  background-color: #fff !important;
  height: 40px !important;
  border: none !important;
  padding: 0 !important;
}
/deep/.ant-table-tbody .blue {
  background-color: rgba(39, 111, 255, 0.1) !important;
  height: 40px !important;
  border: none !important;
  padding: 0 !important;
}
</style>
